<template>
  <!-- 多语言管理 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="langDataList" @query="getMultiLanguage(true)" @reset="refresh">
        <template v-slot:row></template>
        <template v-slot:actions>
            <el-button type="primary" v-permission="'multilingual.add'" size="mini" icon="el-icon-plus" @click="isShowDetails=true,checkedItem=null">新增</el-button>
            <el-button type="info"  size="mini" icon="el-icon-refresh" @click="getMultiLanguage">刷新</el-button>
        </template>
        <template>
          <el-table-column align="center" type="index" width="50">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.isChecked" :label="true" @change="handleCurrentChange(scope.row)">{{''}}</el-radio>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="id" label="ID" width="80"/> -->
          <el-table-column align="center" prop="a_base_message_id" label="Message ID" width="150"/>
          <el-table-column align="center" prop="c_base_zh_cn" label="Message">
            <template slot-scope="scope">
              <span>{{scope.row.c_base_zh_cn?scope.row.c_base_zh_cn:scope.row.c_base_zh_hk}}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="operation" label="操作" width="240">
            <template slot-scope="scope">
              <el-tooltip v-permission="'multilingual.edit'" effect="dark" content="编辑" placement="top-start">
                <el-button  size="mini" type="warning"  @click.stop="editItem(scope.row)"><i class="el-icon-edit-outline"/></el-button>
              </el-tooltip>
              <el-tooltip v-permission="'multilingual.delete'" effect="dark" content="删除" placement="top-start">
                <el-button  size="mini" type="danger"  @click.stop="deleteItem(scope.row)"><i class="el-icon-delete"/></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
        <template v-slot:footer>
          <pagination v-show="currentTotal>0" :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getMultiLanguage" />
        </template>
      </search-table>
      <page-details :show="isShowDetails" @onHideDetails="onHideDetails" :data="checkedItem"></page-details>
    </div>
  </div>
</template>

<script>
import {throttle} from '@/utils/index'
import {
  getAdminMultilingual,
  delAdminMultilingual
} from '@/api/game'
import PageDetails from './page-details.vue'
import SearchTable from '@/components/SearchTable'
import { mapActions } from "vuex";
export default {
  name:'multilingual',
  components:{
    PageDetails,
    SearchTable
  },
  data() {
    return {
      langDataList: [],
      checkedItem:null,
      listLoading: false,
      isShowDetails: false,
      currentTotal:0,
      listQuery:{
        page: 1,
        size: 50,
      }
    }
  },
  created() {
    // this.getMultiLanguage()
  },
  activated() {
    this.getMultiLanguage()
  },
  methods: {
    ...mapActions({
      'updateLanguageData': 'commonState/updateLanguageData'
    }),
    // 获取多语言列表
    async getMultiLanguage(query){
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.langDataList= [];
      that.checkedItem = null;
      that.listLoading = true;
      const response = await getAdminMultilingual(params)
      if(response.code==1){
        if(response.data.list){
          response.data.list.forEach(item=>{
            item.isChecked = false
          })
          that.currentTotal = response.data.total
          that.langDataList = response.data.list
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 编辑/查看
    editItem(row){
      let that=this;
      that.isShowDetails = true;
      that.checkedItem = row;
      that.handleCurrentChange(row)
    },
    // 删除
    deleteItem(row){
      let that=this;
      that.handleCurrentChange(row)
      that.$confirm(`是否删除【${row.a_base_message_id} (${row.c_base_zh_cn})】多语言?`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        delAdminMultilingual({
        	id:row.id
        }).then(function(res) {
          that.updateLanguageData(true)
          that.getMultiLanguage()
          that.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(()=>{}) ;
    },
    // 选择表格数据
    handleCurrentChange(val) {
      this.checkedItem = val;
      this.langDataList.map(item=>{
        if (item.id === val.id) {
        	item.isChecked = true
        } else {
        	item.isChecked = false
        }
      })
    },
    // 隐藏详情
    onHideDetails(show){
      this.isShowDetails = false
      if(show){
        this.getMultiLanguage()
      }
    },
    // 刷新
    refresh:throttle(function(){
      this.listQuery={
        page: 1,
        size: 50,
      }
      this.getMultiLanguage('');
    },2000),
  }
}
</script>

<style lang="scss" scoped>

</style>
